<template>
	<view>
		<TopBar :indexflag="true" :combakflag="true" :lang="false" :bottom="true" :title="$t('Statistics')"
			:barstyle="colortopic()" Color="#fff"></TopBar>
		<u-datetime-picker :show="Startshow" :cancelText="$t('Cancel')" :confirmText="$t('Confirm')"
			@confirm="Startconfirm" @cancel="Startshow=false" @close="Startshow=false" closeOnClickOverlay
			v-model="Startvalue" mode="date" :minDate="minDate" :maxDate="Endvalue"></u-datetime-picker>
		<u-datetime-picker :show="Endshow" :cancelText="$t('Cancel')" :confirmText="$t('Confirm')" @confirm="Endconfirm"
			@cancel="Endshow=false" @close="Endshow=false" closeOnClickOverlay v-model="Endvalue" :minDate="Startvalue" :maxDate="maxDate"
			mode="date"></u-datetime-picker>
		<view class="time-box" :style="{direction:i18nLocale=='ug'?'rtl':''}">
			<view class="selecet-time">
				<view class="time-item">
					<text>{{$t('Start')}}:</text>
					<view class="calendar" @click="Startshow=true">
						<u-icon name="calendar" :color="colortopic()" size="22"></u-icon>
						<view class="title">
							{{timestampToDate(Startvalue)}}
						</view>
					</view>
				</view>
				<view class="time-item">
					<text>{{$t('End')}}:</text>
					<view class="calendar" @click="Endshow=true">
						<u-icon name="calendar" :color="colortopic()" size="22"></u-icon>
						<view class="title">
							{{timestampToDate(Endvalue)}}
						</view>
					</view>
				</view>
			</view>
			<view class="button" @click="changeStats">
				<u-icon name="search" color="#fff" size="22"></u-icon>
				<text>{{$t('Stats')}}</text>
			</view>
		</view>
		<view class="card-list" :style="{direction:i18nLocale=='ug'?'rtl':''}">

			<view class="title">
				{{$t('SrevenueStatistics')}}
			</view>
			<view class="card-item">
				<view class="time">
					<text>{{ststcdata.start}}</text>
					<text> ----- </text>
					<text>{{ststcdata.end}}</text>
				</view>
				<view class="item-box" @click="navgtoeorder">
					<view class="item">
						<view class="">{{ststcdata.count}}</view>
						<view class="title">{{$t('Count')}}</view>
					</view>
					<view class="item">
						<view class="">{{ststcdata.wechat_income}}</view>
						<view class="title">{{$t('WechatIncome')}}</view>
					</view>
					<view class="item">
						<view class="">{{ststcdata.other_income}}</view>
						<view class="title">{{$t('OtherIncome')}}</view>
					</view>
					<view class="item">
						<view class="">{{ststcdata.other_income + ststcdata.wechat_income }}</view>
						<view class="title">{{$t('SumIncome')}}</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		shopstats
	} from '@/api/shop.js';
	import {
		timestampToDate
	} from "@/utils/globalfunction.js"
	export default {
		data() {
			return {
				Startshow: false,
				Endshow: false,
				Startvalue: Number(new Date().setDate(new Date().getDate() - 1)),
				Endvalue: Number(new Date()),
				ststcdata: '',
				maxDate:Number(new Date()),
				minDate:'1704073891000',
			};
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		mounted() {
			this.getShopstats();
		},
		methods: {
			Startconfirm(e) {
				this.Startvalue = e.value;
				this.Startshow = false;
				this.getShopstats();
			},
			Endconfirm(e) {
				this.Endvalue = e.value;
				this.Endshow = false;
				this.getShopstats();
			},
			changeStats() {
				this.getShopstats();
			},
			getShopstats() {
				let that = this;
				shopstats({
					start: parseInt(that.Startvalue / 1000),
					end: parseInt(that.Endvalue / 1000)
				}).then((res) => {
					if (res.code == 200) {
						let data = res.body;
						that.ststcdata = data.data;
					}
				})
			},
			navgtoeorder(){
				uni.navigateTo({
					url:'/pages/boos/statistics/allorder?startvalue='+this.Startvalue+'&endvalue='+this.Endvalue
				})
			}
		}

	}
</script>

<style lang="scss">
	.time-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		padding: 30rpx 0rpx;
		box-sizing: border-box;

		.selecet-time {
			width: 60%;

			.time-item {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
			}

			.calendar {
				width: 300rpx;
				display: flex;
				align-items: center;
				border: 1rpx solid #999;
				padding: 10rpx 10rpx;
				border-radius: 10rpx;
				margin: 0rpx 10rpx;

				.title {
					color: #999;
					font-size: $uni-font-size-sm1;
					padding: 10rpx 0rpx;

				}
			}
		}

		.button {
			background-color: $uni-color-topic;
			border-radius: 30rpx;
			padding: 7rpx 20rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				padding: 0rpx 10rpx;
			}
		}

	}

	.card-list {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		overflow: scroll;
		margin-bottom: 100rpx;

		.title {
			color: $uni-color-title;
			font-size: $uni-font-size-base;
			padding: 10rpx 10rpx;
		}

		.card-item {
			width: 100%;
			height: 500rpx;
			background: #FFFFFF;
			box-shadow: $uni-bg-shadow;
			border-radius: $uni-border-radius-lg;
			margin: 20rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx 40rpx;
			box-sizing: border-box;

			.time {
				width: 100%;
				height: 20%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: #999;

			}

			.item-box {
				width: 100%;
				height: 90%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 40rpx 0rpx;
				box-sizing: border-box;
				flex-wrap: wrap;
				

				.item {
					width:300rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: $uni-color-topic;
					font-size: $uni-font-size-lg;
					padding:10rpx 20rpx;
					box-sizing: border-box;

					.title {
						padding: 10rpx 0rpx;
						color: #000;
						font-size: $uni-font-size-base;
					}
				}
			}

		}
	}
</style>